<template>
  <div class="accountInfo">
    <div class="account">
      <div class="account_title">管理制度</div>
    </div>
    <div>
      <!-- 表格 -->
      <div class="margin-bot">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :defaultExpandedRowKeys="firstKey"
          v-if="flagTable"
        >
          <!-- v-if="record.description.data.length!=0" -->
          <div slot="expandedRowRender" slot-scope="record" style="margin: 0;">
            <div class="flexBetween">
              <div class="flexStart" style="text-align:left;width:33%">
                <div class="openTabDiv">管理文件：</div>
                <div style="width:60%">
                  <div
                    v-for="(item,index) in record.description.data"
                    :key="index"
                    @click="showPdf(item.fileUrl)"
                    style="color:#1890ff"
                  >
                    <a-icon type="paper-clip" style="margin-right:6px" />
                    <span class="checkInfo">{{item.fileName}}</span>
                  </div>
                </div>
              </div>
              <div
                class="openTabDiv"
                style="text-align:left;width:33%"
              >创建人：{{record.description.people}}</div>
              <div
                class="openTabDiv"
                style="text-align:left;width:33%"
              >最新更新：{{record.description.time}}</div>
            </div>
          </div>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(this.total)"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visible2"
        title
        :footer="null"
        :maskClosable="false"
        width="1080px"
        top="10px"
        :bodyStyle="{textAlign:'center'}"
        v-if="visible2"
        key="modal2"
        class="pdfModal"
      >
        <embed v-if="visible2" width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { manageAdd, manageDelete, manageGet, manageQuery, manageUpdate } from '@/api/manageFile'
import { uploadOSS } from '@/utils/oss.js'
import { message } from 'ant-design-vue'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      columns: [
        { title: '文件名称', dataIndex: 'name', key: 'name' },
        { title: '文件分类', dataIndex: 'type', key: 'type' },
        // { title: "考核结果", dataIndex: "result", key: "result" },
        { title: '发布日期', dataIndex: 'releaseDate', key: 'releaseDate' }
        // { title: "备注", dataIndex: "remarks", key: "remarks" },
      ],
      data: [],
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 5,
      total: 1,
      modalTitle: '新增管理文件',
      visible: false,
      visible2: false,
      isUpload: false,
      likeName: '',
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        type: '',
        result: '',
        fileInfoList: [],
        releaseDate: moment(new Date()),
        packageId: ''
      },
      defaultFileList: [],

      headers: {
        authorization: 'authorization-text'
      },
      pdfData: { id: [], name: [] },
      flag: false,
      flagTable: false,
      pdfUrl: '',
      firstKey: []
    }
  },

  mounted() {
    this.getTable()
  },
  methods: {
    moment,

    getTable() {
      let data1 = {}
      data1.likeName = this.likeName
      data1.page = this.current
      data1.size = this.pageSize
      data1.orgId = sessionStorage.getItem('gatewayId')
      let _this = this
      this.flagTable = false
      manageQuery(data1).then((res) => {
        let tabdata = res.data.data
        if (tabdata.length > 0) {
          this.firstKey[0] = tabdata[0].id
          this.flagTable = true
          _this.data = []
          tabdata.forEach((item, index) => {
            item.key = item.id

            item.releaseDate = moment(item.releaseDate).format('YYYY-MM-DD')
            item['description'] = {}
            item['description']['data'] = item.fileList
            item['description']['people'] = item.createName
            item['description']['time'] = moment(item.updateTime).format('YYYY-MM-DD')
          })
          _this.data = tabdata
          this.total = res.data.total
        } else {
          this.flagTable = true
          this.data = []
          this.total = 0
        }

        // console.log(tabdata);
      })
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTable()
    },
    pageChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = current
      this.pageSize = pageSize
      this.getTable()
    },

    showPdf(text) {
      this.visible2 = true
      this.pdfUrl = text
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>

<style scoped lang="less">
.manageFile {
  background: #fff;
  padding: 15px 30px;
}
.margin-bot {
  margin-bottom: 30px;
}
.checkInfo:hover {
  color: #1890ff;
  cursor: pointer;
}
.tdShow {
  display: none;
}
.pdfModal {
  ::v-deep .ant-modal {
    width: 1080px !important;
    top: 20px;
  }
}
.pdfModal ::v-deep .ant-modal-body {
  padding: 40px;
  text-align: center;
  height: 780px;
}
.account {
  height: 45px;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 30px;
}
.account_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
</style>
